<template>
    <div>
        <!-- 容器组件 -->
        <el-container>
            <el-aside width="120px" style="background-color:#d3dce6;line-height:320px">Aside</el-aside>
            <el-container>
                <el-header>Header</el-header> <!-- 头部区域 -->
                <el-main>Main</el-main> <!-- 主体内容块 -->
                <el-footer>Footer</el-footer> <!-- 底部区域 -->
            </el-container>
        </el-container>

        <!-- 用户头像处，下拉框 -->
        <el-dropdown>
            <span class="el-dropdown-link">
                <el-avatar
                    src="https://img2.baidu.com/it/u=4189138655,2791281222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
                </el-avatar><i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <!-- 这里的el-dropdown 点击后click不生效（需要在click后面跟上.native后才可以生效） -->
                <el-dropdown-item @click.native="goMyHome">个人中心</el-dropdown-item>
                <el-dropdown-item @click.native="goLogin">退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>

        <div>
            <!-- 触碰显示的提示信息 -->
            <el-tooltip :content="isLodingText" placement="right" effect="light">
                <!-- 点击登录按钮 -->
                <el-button type="primary" class="btn" :loading="isLoding" @click="doLogin">{{ isLodingText }}
                </el-button>
            </el-tooltip>
        </div>

        <!-- 学生列表 -->
        <div style="margin:30px 0">
            <div v-for="(item, index) in stuList" :key="index">
                {{ item }}
                <!-- <span v-for="(item_, index_) in item" :key="index_">{{ item_ }}</span> -->
            </div>
            <el-button @click="addStu">新增学生</el-button>
        </div>

        <!-- 按空格 控制台打印 -->
        <div>
            <p>按空格打印</p>
            <input type="text" @keydown.space="spaceFun($event)">
        </div>

        <!-- 结束图 -->
        <el-empty description="没有更多的东西了..." class="onePicture"></el-empty>
    </div>
</template>

<script>

export default {
    data() {
        return {
            isLoding: false,       // 登录按钮默认不显示loding效果
            isLodingText: '登 录',  // 按钮默认显示文字
            value: '888888',

            // 学生列表
            stuList: [
                '张三', '李四'
                // { name: '张三', age: 18, address: '重庆市渝北区' },
                // { name: '李四', age: 16, address: '北京市海淀区' },
                // { name: '王五', age: 22, address: '上海市浦东区' }
            ]
        }
    },
    methods: {
        // 登录按钮事件  
        doLogin() {
            console.log('点击了一次登录按钮')
            this.isLoding = true;     // 点击按钮之后，立即显示loding效果（给他loding效果是为了在没请求成功之前，不能再继续被点击）
            this.isLodingText = "登录中..."    // 点击按钮之后，按钮文字显示为"登录中..."
            // 定时器模拟 后端接口请求 (两秒之后，样式切回原始样式)
            setTimeout(() => {
                this.isLoding = false
                this.isLodingText = "登 录"
                // element 提示组件
                this.$message({
                    message: "登录成功！",
                    type: "success"
                })
                console.log('登录成功了');
                // 点击登录按钮，2s后跳转页面
                this.$router.push('/myHome')
            }, 1000);
        },

        // 新增学生按钮
        addStu() {
            this.stuList.unshift(JSON.parse(JSON.stringify('王五')))
        },

        // 按空格打印
        spaceFun(e) {
            console.log('空格被按下了', e);
        },

        // 点击 个人中心按钮
        goMyHome() {
            setTimeout(() => {
                this.$router.push('/myHome')
            }, 200);
        },
        // 退出登录
        goLogin() {
            setTimeout(() => {
                this.$router.push('/loginPage')
            }, 200);
        }
    },
}
</script>

<style lang="less" scoped>
.el-header,
.el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
}

.btn {
    width: 20%;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 16%)
}

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}

.el-icon-arrow-down {
    font-size: 12px;
}

.onePicture {
    margin-top: 50px;
}
</style>